<template>
	<view class="content">
		<u-sticky>
			<view class="filter">
				<u-search placeholder="请输入您想查找的内容" borderColor="#484b5e" color="#eee" bgColor="#484b5e" :showAction="false"></u-search>
				<view class="sort">
					<view class="left">
						<view class="col" @click="onClickSort('ctime')">
							<text>时间排序</text>
							<view class="arrow">
								<u-icon name="arrow-up-fill" :color="query.sort.ctime == true ? '#fac22b' : 'rgb(96, 98, 102)'" size="8"></u-icon>
								<u-icon name="arrow-down-fill" :color="query.sort.ctime == false  ? '#fac22b' : 'rgb(96, 98, 102)'" size="8"></u-icon>
							</view>
						</view>
						<view class="col" @click="onClickSort('price')">
							<text>价格排序</text>
							<view class="arrow">
								<u-icon name="arrow-up-fill" :color="query.sort.price == true  ? '#fac22b' : 'rgb(96, 98, 102)'" size="8"></u-icon>
								<u-icon name="arrow-down-fill" :color="query.sort.price == false ? '#fac22b' : 'rgb(96, 98, 102)'" size="8"></u-icon>
							</view>
						</view>
					</view>
					<view class="right" @click="show = true">筛选</view>
				</view>
				<u-line></u-line>
				<view class="hot">
					<view class="title">热门推荐：</view>
					<view class="tags">
						<scroll-view class="scroll" scroll-x="true">
							<view @click="onChangeGategory(item)" v-for="(item, index) in gategorys" class="item" :class="{active: item.id == query.categoryId}" :id="index">
							   <text>{{item.name}}</text>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</u-sticky>
		<list :list="list"/>
		<u-loadmore v-if="list.length > 0" :status="status" />
		<u-popup :show="show" mode="right">
			<view class="popup">
				<view class="tip">请选择检索条件</view>
				<view class="title">市场类型</view>
				<view class="row">
					<u-grid :border="false" col="3">
						<u-grid-item class="grid-item">
							<view @click="onFilter('marketType', null)" class="btn" :class="{active: query.marketType == null}">全部</view>
						</u-grid-item>
						<u-grid-item class="grid-item" v-for="(v, k) in MarketType">
							<view @click="onFilter('marketType', k)" class="btn" :class="{active: query.marketType == k}">{{v}}</view>
						</u-grid-item>
					</u-grid>		
				</view>
				<view class="title">系列</view>
				<view class="row">
					<u-grid :border="false" col="3">
						<u-grid-item class="grid-item">
							<view @click="onFilter('series', null)" class="btn" :class="{active: query.series == null}">全部</view>
						</u-grid-item>
						<u-grid-item class="grid-item" v-for="(v, k) in series">
							<view @click="onFilter('series', k)" class="btn" :class="{active: query.series == k}">{{v}}</view>
						</u-grid-item>
					</u-grid>		
				</view>
				<view class="title">藏品状态</view>
				<view class="row">
					<u-grid :border="false" col="2">
						<u-grid-item class="grid-item">
							<view @click="onFilter('status', null)" class="btn" :class="{active: query.status == null}">全部</view>
						</u-grid-item>
						<u-grid-item class="grid-item" v-for="(v, k) in MarketStatus">
							<view @click="onFilter('status', k)" class="btn" :class="{active: query.status == k}">{{v}}</view>
						</u-grid-item>
					</u-grid>		
				</view>
				<view class="light-btn close" @click="show = false">关闭</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {mapState, mapActions} from 'vuex'
	import list from './components/list'
	import { MarketType, MarketStatus, series, saleType } from '@/common/config/enums.js'
	export default {
		components: {
			list
		},
		data() {
			return {
				query: {
					page: 1,
					limit: 10,
					categoryId: null,
					artistId: null,
					marketType: null,
					series: null,
					chainName: null,
					tokenStandard: null,
					status: null,
					key: null,
					label: null,
					sort: {}
				},
				MarketType,
				MarketStatus,
				series,
				saleType,
				gategorys: [],
				list: [],
				status: 'loadmore',
				show: false
			}
		},
		onLoad(options) {
			this.getGategoryList().then(res => {
				res.data.map(item=>item.loading = false);
				this.gategorys = res.data
			})
			this.query.marketType = options.marketType ? options.marketType : null
			this.getList()
		},
		onReachBottom() {
			if(this.status == 'nomore'){
				return;
			}
			this.query.page = this.query.page + 1
			this.getList()
		},
		onPullDownRefresh() {
			uni.startPullDownRefresh();
			this.getList();
		},
		methods: {
			...mapActions('market', ['getMarketList', 'getGategoryList']),
			onChangeGategory(item){
				this.query.categoryId = this.query.categoryId == item.id ? null : item.id;
				this.resetPage()
				this.getList()
			},
			onClickSort(field){
				if(this.query.sort[field] === false){
					delete this.query.sort[field]
				}else{
					this.query.sort[field] = !this.query.sort[field]
				}
				this.getList()
			},
			onFilter(field, value){
				this.resetPage()
				this.query[field] = value
				this.getList()
				this.show = false
			},
			getList(){
				this.status = 'loading'
				this.getMarketList(this.query).then(res => {
					this.list = this.list.concat(res.rows)
					uni.stopPullDownRefresh();
					if(this.query.page == res.pages){
						this.status = 'nomore'
					} else {
						this.status = 'loadmore'
					}
				})
			},
			resetPage(){
				this.query.page = 1
				this.list = []
				this.status = 'loadmore'
			},
			reset(){
				this.query = {
					page: 1,
					limit: 10,
					categoryId: null,
					artistId: null,
					marketType: null,
					series: null,
					chainName: null,
					tokenStandard: null,
					status: null,
					key: null,
					label: null,
					sort: {}
				}
				this.list = []
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	.content{
		padding: 0rpx 20rpx;
		.filter{
			background-color: #0a0a22;
			.hot{
				padding: 20rpx 0;
				.title{
					width: 140rpx;
					float: left;
				}
				.tags{
					margin-left: 140rpx;
					.scroll{
						font-size: 13px;
						color: #ffffff;
						white-space: nowrap;
						.item{
							text-align: center;
							display: inline-block;
							vertical-align: top;
							overflow: hidden;
							background-color: #484b5e;
							margin-right: 10rpx;
							padding: 5rpx 10rpx;
							border-radius: 8rpx;
							font-size: 25rpx;
						}
						.active{
							background-color: #fac22b !important;
						}
					}
				}
			}
			.sort{
				display: flex;
				justify-content: space-between;
				padding: 30rpx 10rpx;
				.left{
					display: flex;
					.col{
						display: flex;
						align-items: center;
						margin-right: 30rpx;
					}
					.col .arrow{
						padding-left: 10rpx;
					}
				}
				.right{
				}
			}
		}
		.popup{
			background-color: #0b0b30;
			height: 100%;
			width: 400rpx;
			padding: 40rpx 20rpx;
			.tip{
				padding: 50rpx 0;
				font-weight: bold;
			}
			.row{
				padding: 20rpx 0;
				margin-bottom: 40rpx;
				.btn{
					background-color: #484b5e;
					width: 95%;
					padding: 10rpx 0;
					text-align: center;
					font-size: 26rpx;
					margin-bottom: 10rpx;
				}
				.active{
					background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
					background-size: 400%;
				}
			}
			.close{
				width: 100%;
				height: 60rpx;
				line-height: 60rpx;
			}
		}
	}
</style>
